<template>
  <div class="my-graph-wrapper">
    <table-view
      :cols="cols"
      :tableData="tableData"
      :showOperate="true"
      :buttonCount="2"
      :operateButtons="operateButtons"
      @on-operate="tableOperate"
      :showPaginator="true"
      :pageNumber="pageNumber"
      :pageSize="pageSize"
      :totalRecords="totalRecords"
      layout="prev, pager, next , total"
    ></table-view>
    <el-dialog
      :visible.sync="showGraph"
      width="80%"
      append-to-body
      class="graph-dialog"
    >
      <relationship-graph class="single-graph" id="my-graph"></relationship-graph>
      <div class="mask"></div>
    </el-dialog>
  </div>
</template>

<script>
import TableView from '../../../../components/el-extend-components/TableView/TableView.vue'
import { RelationshipGraph, useGraph } from '../../../../components/other-extend-components/RelationshipGraph'
import nodeData from "./data.js";
export default {
  name:'MyGraph',
  components:{
    TableView,
    RelationshipGraph
  },
  props:{
    nid:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      cols:[
        {
          field:'name',
          header:'图谱名称'
        },
        {
          field:'explain',
          header:'图谱备注'
        },
        {
          field:'saveDate',
          header:'时间'
        }
      ],
      operateButtons:['查看','删除'],
      tableData:[],
      pageNumber:1,
      pageSize:10,
      totalRecords:0,
      currentGid:'',
      showGraph: false,
      relationGraph: null,
      loading: null
    }
  },
  methods:{
    //  得到graph
    getGrapth(){
      let param = {
        filter:{},
        pageNumber:this.pageNumber,
        pageSize:this.pageSize
      }
      //  获取我的图表的接口
    },
    //  得到单个图谱数据
    getSingleGraph(){
      let param = {}
      param['userName'] = 'hongdunTest'
      param['gid'] = this.currentGid
      //  获取单个图表的接口
    },
    tableOperate({btnText,index,row}){
      this.currentGid = row.id
      if(btnText == '查看'){
        //  查看图谱
        // 查看图片 直接展示一个图谱
        this.getSingleGraph()
      }else if(btnText == '删除'){
        //  删除图谱
        let dom = `
          <div style="text-align:center;">
            <i class="el-icon-question" style="color:#fe6c6f;font-size:36px;"></i>
            <div style="margin-top:16px;">确认删除该图谱记录？</div>
          </div>
        `;
        this.$confirm(dom, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "cancel-btn",
          closeOnClickModal: false,
          dangerouslyUseHTMLString: true
        })
        .then(() => {
          //  去调取删除我的图谱的接口
          this.loading = this.$loading({
            lock: true,
            text: '正在删除记录',
            spinner:'el-icon-loading',
            background:'rgba(0,0,0,0.5)'
          });
          let param = {
            gid:this.currentGid
          }
          // 删除单个图表的接口
        })
        .catch(() => {
          // this.$message.info("已取消导出excel");
        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.my-graph-wrapper{
  width: 100%;
  min-height: 200px;
}
/deep/.graph-dialog{
  .el-dialog{
    height: 80%;
    .el-dialog__body{
      height: calc(100% - 90px);
      position: relative;
      .single-graph{
        height: 100%;
      }
      .mask{
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: transparent;
      }
    }
  }
}
</style>
